<template>
  <div>

    <basic-container>
      <vue-element-loading :active="loading" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
      <el-form :inline="true" :model="formInline" >
        <div style="margin-top: 22px">
          <el-form-item>
            <el-select v-model="formInline.promoteLeadId"  filterable clearable placeholder="推广商">
              <el-option
                v-for="item in presidentList"
                :key="item.id"
                :label="item.account"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input clearable v-model="formInline.orderNum" v-if="isorderNum" placeholder="订单号"/>
          </el-form-item>
          <el-form-item>
            <el-input clearable v-model="formInline.payOrder" v-if="isorderNum" placeholder="商户单号"/>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.projectId"  filterable clearable placeholder="游戏">
              <el-option
                v-for="item in gamelist"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input clearable v-model="formInline.userAccount" placeholder="玩家账号"/>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.payType" v-if="istype"  clearable placeholder="支付方式">
              <el-option
                v-for="item in payType"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="time"
              clearable
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
            <el-button icon="el-icon-download" type="primary" @click="handleExport">导出Excel</el-button>
          </el-form-item>
        </div>
      </el-form>
    <el-row>
      <el-col :span="24">
        <span style="font-size: 12px;font-family: Lucida Console;color: #ff4d51 ">水滴充值总数量:{{(Number(totalList.wx))+(Number(totalList.ali))+(Number(totalList.ysf))}} </span>
        <span style="font-size: 12px;font-family: Lucida Console;color: #e6a23c;margin-left: 10px ">水滴消费总数量:{{totalList.provideAmount}} </span>
        <span style="font-size: 12px;font-family: Lucida Console;color: #00ff00;margin-left: 10px ">水滴赠送总数量:{{totalList.recycleCoins}} </span>
        <span style="font-size: 12px;font-family: Lucida Console;color: #000000;margin-left: 10px ">水滴剩余总数量:{{(Number(totalList.wx))+(Number(totalList.ali))+(Number(totalList.ysf))+(Number(totalList.recycleCoins))-(Number(totalList.provideAmount))}}</span>
      </el-col>
      <el-col :span="24">
        <el-radio-group v-model="type"  @change="histTypeUpdate">
          <el-radio-button label="1">充值</el-radio-button>
          <el-radio-button label="2">消费</el-radio-button>
          <el-radio-button label="3">赠送</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="24">
        <template>
          <el-table v-if="type==1"
            :data="tableData"
                    stripe
            :summary-method="getSumDeposit"
            show-summary
            style="width: 100%">
            <el-table-column
              prop="orderNum"
              width="300"
              label="订单号" key="1">
            </el-table-column>
<!--            <el-table-column-->
<!--              prop="userAccount"-->
<!--              width="200"-->
<!--              label="玩家账号" key="2">-->
<!--            </el-table-column>-->
            <el-table-column
              prop="userAccount"
              width="200"
              label="玩家账号" key="2">
              <template slot-scope="scope">
                <span v-if="scope.row.phone!=''"><span
                  class="skucost-pruice">{{ scope.row.phone}}</span></span>
                <span v-else><span
                  class="skucost-pruice">{{ scope.row.userAccount}}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="ganmeName"
              label="游戏" key="3">
            </el-table-column>
            <el-table-column
              prop="payAmount"
              label="订单金额" key="4">
              <template slot-scope="scope">
                <span v-if="scope.row.payAmount!=''"><span
                  class="skucost-pruice">{{ (Number(scope.row.payAmount)/100).toFixed(2) }}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="recAccount"
              label="水滴数量" key="5">
              <template slot-scope="scope">
                <span class="skucost-pruice">{{ scope.row.recAccount }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="payType"
              label="支付方式" key="6">
              <template slot-scope="scope">
                <span v-if="scope.row.payType==1"><span
                  class="skucost-pruice">支付宝支付</span></span>
                <span v-if="scope.row.payType==2"><span
                  class="skucost-pruice">微信支付</span></span>
                <span v-if="scope.row.payType==3"><span
                  class="skucost-pruice">云闪付支付</span></span>
                <span v-if="scope.row.payType==4"><span
                  class="skucost-pruice">银盛支付宝支付</span></span>
                <span v-if="scope.row.payType==5"><span
                  class="skucost-pruice">银盛微信支付</span></span>
                <span v-if="scope.row.payType==8"><span
                  class="skucost-pruice">通联支付宝支付</span></span>
                <span v-if="scope.row.payType==9"><span
                  class="skucost-pruice">通联微信支付</span></span>
                <span v-if="scope.row.payType==6"><span class="skucost-pruice">支付宝扫码</span></span>
                <span v-if="scope.row.payType==7"><span class="skucost-pruice">微信扫码</span></span>
                <span v-if="scope.row.payType==18"><span class="skucost-pruice">通联支付宝扫码</span></span>
                <span v-if="scope.row.payType==19"><span class="skucost-pruice">通联微信扫码</span></span>
                <span v-if="scope.row.payType==16"><span
                  class="skucost-pruice">君子支付宝支付</span></span>
                <span v-if="scope.row.payType==17"><span
                  class="skucost-pruice">君子微信支付</span></span>
                <span v-if="scope.row.payType==10"><span
                  class="skucost-pruice">银商支付宝支付</span></span>
                <span v-if="scope.row.payType==11"><span
                  class="skucost-pruice">银商微信支付</span></span>
                <span v-if="scope.row.payType==20"><span
                  class="skucost-pruice">翔宇支付宝支付</span></span>
                <span v-if="scope.row.payType==21"><span
                  class="skucost-pruice">翔宇微信支付</span></span>
              </template>
            </el-table-column>
              <el-table-column
                prop="createTime"
                label="下单时间" key="7">
              </el-table-column>
            <el-table-column
              prop="payTime"
              label="付款时间" key="8">
              <template slot-scope="scope">
                <span v-if="scope.row.payTime!=''"><span
                  class="skucost-pruice">{{ scope.row.payTime  | formatDate('YYYY-MM-DD HH:mm:ss') }}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="payOrder"
              label="商户单号" key="9" >
            </el-table-column>
            <el-table-column
              prop="promoteLeadName"
              label="推广商账号" key="10" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
              prop="promoteMangerName"
              label="主管账号" key="11" v-if="isshowtrue">
            </el-table-column>
            <el-table-column
              prop="paccount"
              label="组长账号" v-if="isshowtrue" key="12" >
            </el-table-column>
            <el-table-column
              prop="promoter"
              label="推广员账号" v-if="isshowtrue" key="13">
            </el-table-column>
          </el-table>


          <el-table v-if="type==2"
                    :data="tableData"
                    stripe
                    :summary-method="getSumSpend"
                    show-summary
                    style="width: 100%">

            <el-table-column
              prop="account"
              label="玩家账号" >
              <template slot-scope="scope">
                <span v-if="scope.row.phone!=''"><span
                  class="skucost-pruice">{{ scope.row.phone}}</span></span>
                <span v-else><span
                  class="skucost-pruice">{{ scope.row.account}}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="orderNum"
              width="300"
              label="游戏订单号" >
            </el-table-column>
            <el-table-column
              prop="gameName"
              label="游戏" key="3">
            </el-table-column>
            <el-table-column
              prop="totalAmount"
              label="订单金额" key="4">
              <template slot-scope="scope">
                <span v-if="scope.row.totalAmount!=''"><span
                  class="skucost-pruice">{{ (Number(scope.row.totalAmount)/100).toFixed(2) }}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="totalAmount"
              label="优惠券抵扣金额" key="5">
              <template slot-scope="scope">
                <span ><span
                  class="skucost-pruice">{{ (Number(scope.row.couponAmount)/100).toFixed(2) }}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="totalAmount"
              label="现金支付" key="6">
              <template slot-scope="scope">
                <span v-if="scope.row.payAmount!=''"><span
                  class="skucost-pruice">{{ (Number(scope.row.payAmount)/100).toFixed(2) }}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="provideAmount"
              label="水滴支付" key="7">
            </el-table-column>
            <el-table-column
              prop="payTime"
              label="付款时间" key="8">
              <template slot-scope="scope">
                <span v-if="scope.row.payTime!=''"><span
                  class="skucost-pruice">{{ scope.row.payTime  | formatDate('YYYY-MM-DD HH:mm:ss') }}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="promoteLeadName"
              label="推广商账号" key="10" >
            </el-table-column>
          </el-table>


          <el-table v-if="type==3"
                    :data="tableData"
                    stripe
                    :summary-method="getSumWelfare"
                    show-summary
                    border
                    style="width: 100%">
            <el-table-column
              prop="userAccount"
              label="玩家账号" >
              <template slot-scope="scope">
                <span v-if="scope.row.phone!=''"><span
                  class="skucost-pruice">{{ scope.row.phone}}</span></span>
                <span v-else><span
                  class="skucost-pruice">{{ scope.row.userAccount}}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="gameName"
              label="游戏" >
            </el-table-column>
            <el-table-column
              prop="recycleCoins"
              label="赠送水滴数量" >
            </el-table-column>
            <el-table-column
              prop="recycleDate"
              label="赠送时间" key="8">
              <template slot-scope="scope">
                <span v-if="scope.row.recycleDate!=''"><span
                  class="skucost-pruice">{{ scope.row.recycleDate  | formatDate('YYYY-MM-DD HH:mm:ss') }}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="promoteLeadName"
              label="推广商账号">
            </el-table-column>
            <el-table-column
              prop="promoteMangerName"
              label="主管账号">
            </el-table-column>
            <el-table-column
              prop="paccount"
              label="组长账号"  >
            </el-table-column>
            <el-table-column
              prop="promoter"
              label="推广员账号">
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10,20, 50, 100, 200]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </el-col>
    </el-row>

  </basic-container>
  </div>

</template>



<script>

import website from "@/config/website";
import {getLeadList} from "@/api/system/user";
import {
  appgamewelfarePage,
  demandTotal,
  recycleDemandTotal,
  sdkDepositPage,
  waterDemandTotal,
  waterPage
} from "@/api/system/details";
import {gameList} from "@/api/game/game";
import {getPresident, platformTotal} from "@/api/system/total";
import {cloneObj, parseParam} from "@/util/util";
import {getToken} from "@/util/auth";
import moment from "moment";
import VueElementLoading from "vue-element-loading";
export default {
  data() {
    return {
      isshowtrue:false,
      istype:true,
      isorderNum:true,
      leading:true,
      lead:{},
      page: {
        currentPage: 1,
        pageSize: 20,
        total: '',
      },
      time: [new Date(new Date(moment().subtract(30, 'days').calendar().valueOf()).setHours(0, 0, 0, 0)),new Date(new Date().setHours(23, 59, 59, 0))],
      gamelist:[],
      type:1,
      payType:[{'id':'1','name':'官方支付宝支付'},{'id':'2','name':'官方微信支付'},{'id':'3','name':'云闪付支付'},{'id':'4','name':'银盛支付宝支付'},{'id':'5','name':'银盛微信支付'},{'id':'8','name':'通联支付宝支付'},{'id':'9','name':'通联微信支付'},{'id':'10','name':'银商支付宝支付'},{'id':'11','name':'银商微信支付'},{'id':'16','name':'君子支付宝支付'},{'id':'17','name':'君子微信支付'},{'id':'20','name':'翔宇支付宝支付'},{'id':'21','name':'翔宇微信支付'}],
      pickerOptions: website.pickerOptions,
      formInline: {
        promoteLeadId:'',
        projectId: '',
        payType:'',
        userAccount: '',
        orderNum:'',
        payOrder:'',
      },
      presidentList:{},
      tableData:[],
      totalList:{},
      depositTotal:{},
      waterTotal:{},
      recycleDemandTotalList:{},
    };

  },

  computed: {},
  created() {
    this.nowload(this.leadlevel);
    this.onload();
    this.game();
    this.getTotal();
  },
  components: {
    VueElementLoading
  },
  methods: {
    handleExport() {
      this.$confirm("是否导出平台充值明细数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        var forming={};
        forming = cloneObj(this.formInline)
        if (this.isNotEmpty(this.time)) {
          forming.startTime = this.time[0].getTime()
          forming.endTime = this.time[1].getTime()
        }
        if(this.type==1){
          window.location.href = `/api/blade-details/sdkdeposit/export-sdkDeposit?blade-auth=${getToken()}&${parseParam(forming)}`;
        }
        if(this.type==2){
          window.location.href = `/api/blade-details/spend/export-water?blade-auth=${getToken()}&${parseParam(forming)}`;
        }
        if(this.type==3){
          window.location.href = `/api/blade-details/appgamewelfare/export-appGameWelfare?blade-auth=${getToken()}&${parseParam(forming)}`;
        }
      });
    },
   getSumDeposit() {
      let sums = [];
      sums[0] = '总计(小写)'
      sums[3] = Number(this.depositTotal.payAmountTotal)
      sums[4] = String(this.depositTotal.recAmountTotal)
      for(let i=0; i<=12; i++) {
        if(sums[i] === undefined) {
          sums[i] = '--'
        }
      }
      sums = sums.map(item =>{
        if((typeof item) == "number"){
          return (item/100).toFixed(2)
        }else{
          return item
        }
      });
      return sums;
    },
    getSumSpend() {
      let sums = [];
      sums[0] = '总计(小写)'
      sums[3] = Number(this.waterTotal.totalAmountTotal)
      sums[4] = Number(this.waterTotal.couponAmountTotal)
      sums[5] = Number(this.waterTotal.payAmountTotal)
      sums[6] = String(this.waterTotal.provideAmounTotalt)
      for(let i=0; i<=12; i++) {
        if(sums[i] === undefined) {
          sums[i] = '--'
        }
      }
      sums = sums.map(item =>{
        if((typeof item) == "number"){
          return (item/100).toFixed(2)
        }else{
          return item
        }
      });
      return sums;
    },
    getSumWelfare() {
      let sums = [];
      sums[0] = '总计(小写)'
      sums[2] = String(this.recycleDemandTotalList.recycleCoinsTotal)
      for(let i=0; i<=12; i++) {
        if(sums[i] === undefined) {
          sums[i] = '--'
        }
      }
      sums = sums.map(item =>{
        if((typeof item) == "number"){
          return (item/100).toFixed(2)
        }else{
          return item
        }
      });
      return sums;
    },
    histTypeUpdate(val){
      this.type=val
      this.page.currentPage =1;
      this.tableData=[]
      if(val==1){
        this.istype=true;
        this.isorderNum=true;
        this.onSubmit()
      }
      if(val==2){
        this.istype=false;
        this.isorderNum=true;
        this.formInline.payType=''
        this.consumption()
      }
      if(val==3){
        this.istype=false;
        this.isorderNum=false;
        this.formInline.orderNum=''
        this.formInline.payType=''
        this.giveAway()
      }
    },
    renderHeader () {
      return (
        <div style="display: flex;justify-content: space-between;">
          <div><span>推广商</span>  </div>
          <div  on-click={()=>this.showAll()}> {this.isshowtrue ?  <span style="color:red" class="el-icon-minus"/> : <span style="color:red" class="el-icon-plus"/>} </div>
        </div>
      )
    },
    showAll(){
      this.isshowtrue ? this.isshowtrue = false : this.isshowtrue = true;
      this.$refs['el-table'].doLayout();
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      if(this.type==1){
        this.onload();
      }
      if(this.type==2){
        this.consumption()
      }
      if(this.type==3){
        this.giveAway()
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      if(this.type==1){
        this.onload();
      }
      if(this.type==2){
        this.consumption()
      }
      if(this.type==3){
        this.giveAway()
      }
    },
    isNotEmpty(arr) {
      return arr != null && arr.length !== 0
    },
    isEmpty(arr) {
      return !this.isNotEmpty(arr)
    },

    onSubmit() {
      this.page.currentPage=1

      if(this.type==1){
        this.onload();
      }
      if(this.type==2){
        this.consumption()
      }
      if(this.type==3){
        this.giveAway()
      }
    },
    nowload(level) {
      this.loading = true,
        getLeadList('', level).then(res => {
          const data = res.data.data;
          this.lead = data;
          this.loading = false;
        });
    },

    game(){
      gameList(this.formInline).then(res => {
        const data = res.data.data;
        this.gamelist = data;
      });
    },
     getTotal(){
       // total().then(res=>{
       //   const data = res.data.data;
       //   console.log("res.data.datghgkjjghjkha", data)
       //   this.totalList=data
       // })
       platformTotal(this.formInline).then(res=>{
         const data = res.data.data;
         this.totalList=data
       })
     },
    onload(){
      var startTime = undefined;
      var endTime = undefined;
      if (this.isNotEmpty(this.time)) {
        startTime = this.time[0].getTime()
        endTime = this.time[1].getTime()
      }
      this.loading = true;
      sdkDepositPage(this.page.currentPage, this.page.pageSize, Object.assign(this.formInline), startTime,endTime).then(res => {
        const data = res.data.data;
        console.log("res.data.data", res.data.data)
        this.page.total = data.total;
        this.tableData = data.records;
        this.loading = false;
      });
      getPresident(1).then(res=>{
        const data = res.data.data;
        this.presidentList=data
      })
      demandTotal(this.formInline, startTime,endTime).then(res => {
        this.depositTotal = res.data.data;

      });
    },

    consumption(){
      var startTime = undefined;
      var endTime = undefined;
      if (this.isNotEmpty(this.time)) {
        startTime = this.time[0].getTime()
        endTime = this.time[1].getTime()
      }
      this.loading = true;
      waterPage(this.page.currentPage, this.page.pageSize, Object.assign(this.formInline), startTime,endTime).then(res => {
        const data = res.data.data;
        console.log("res.data.data", res.data.data)
        this.page.total = data.total;
        this.tableData = data.records;
        this.loading = false;
      });
      waterDemandTotal(this.formInline, startTime,endTime).then(res => {
       this.waterTotal = res.data.data;

      });
    },

    giveAway(){
      var startTime = undefined;
      var endTime = undefined;
      if (this.isNotEmpty(this.time)) {
        startTime = this.time[0].getTime()
        endTime = this.time[1].getTime()
      }
      this.loading = true;
      appgamewelfarePage(this.page.currentPage, this.page.pageSize, Object.assign(this.formInline), startTime,endTime).then(res => {
        const data = res.data.data;
        console.log("res.data.data", res.data.data)
        this.page.total = data.total;
        this.tableData = data.records;
        this.loading = false;
      });
      recycleDemandTotal( Object.assign(this.formInline), startTime,endTime).then(res => {
        this.recycleDemandTotalList = res.data.data;

      });
    },
  }
}

</script>


<style>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
  width: 100px;
}
</style>
